<template>
  <div class="flex align-center">
    <div class="img_list flex align-center flex-wrap">
      <div v-for="(imageUrl, index) in imgList" :key="index">
        <div v-if="imageUrl" class="img_box margin-right margin-top">
          <img :src="imgPath(imageUrl)" :style="{
            width: `${size}px`,
            height: `${size}px`,
          }" />

          <div class="icon-btns-mask">
            <div class="icon-btns">
              <el-icon :size="24" color="#FFF" @click="handleDelete(index)">
                <Delete />
              </el-icon>
            </div>
          </div>
        </div>
      </div>

      <el-upload size="180" class="margin-top" :show-file-list="false" :before-upload="beforeUpload"
        v-if="imgList.length < maxCount">
        <template #default>
          <div class="uploader" :style="{
            width: `${size}px`,
            height: `${size}px`,
          }">
            <el-icon class="uploader-icon" :size="size / 4" color="#8c939d">
              <Plus />
            </el-icon>
          </div>
        </template>
      </el-upload>
    </div>


  </div>
</template>

<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { UploadImage } from '@/api/index'
import type { UploadProps, UploadUserFile } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },

  size: {
    type: [String, Number],
    default: '180'
  },

  maxCount: {
    type: [String, Number],
    default: '1'
  },

  isAllUrl: {
    type: Boolean,
    default: false
  }
})

const imgList = ref([])

const beforeUpload = async (file) => {
  try {
    let formData = new FormData()

    formData.append('image', file)

    const res = await UploadImage(formData)

    imgList.value.push(props.isAllUrl ? res.data.urlupload : res.data.urlupload)
  } catch (err) {
    console.log('uloadImg', err)
  }
}

// 处理删除
const handleDelete = (delIndex) => {
  imgList.value = imgList.value.filter((item, index) => index !== delIndex)
}

watch(imgList, (newVal) => {
  emit('update:modelValue', newVal ? newVal.join(',') : '')
},
  {
    deep: true
  }
)

watch(
  () => props.modelValue,
  (newVal) => {
    const isArray = Array.isArray(newVal)

    if (isArray) {
      imgList.value = newVal
    }

    if (typeof newVal === 'string') {
      imgList.value = newVal ? newVal.split(',') : []
    }

  },
  {
    deep: true,
    immediate: true
  }
)

const imgPath = (url) => {
  const hasHttp = url.includes("http:") || url.includes("https:");

  let resUrl = hasHttp ? url : import.meta.env.VITE_UPLOAD_BASE + url

  return resUrl
}

const emit = defineEmits(['update:modelValue'])

// const changeFileData = (imgUrl) => {
//   return {
//     name: getImageNameToUrl(imgUrl),
//     url: imgUrl
//   }
// }

// // 转化为图片file图片格式
// const getImageNameToUrl = (path) => {
//   const lastIndex = path.lastIndexOf('/');
//   const fileName = path.substring(lastIndex + 1);
//   return fileName
// }
</script>

<style lang="scss">
.uploader {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.img_list {
  .img_box {
    position: relative;

    &:hover .icon-btns-mask {
      display: block;
    }

    .icon-btns-mask {
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
    }

    .icon-btns {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
